<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8" />
		<title>Hello H5+</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<style type="text/css">
			#map {
				width: 100%;
				position: fixed;
				top: 3.2rem;
				bottom: 0px;
				line-height: 200px;
				text-align: center;
				background: #FFFFFF;
			}
			
			.ipos {
				background: no-repeat center center url();
				background-size: 50px 44px;
			}
			
			header {
				background: transparent;
			}
			
			.hotel-header, .mui-title, .hotel-header .mui-icon {
				color: #e61874;
				background-color: #fff;
			}
			
			.mui-title {
				font-size: 0.9rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title"><div class="mui-input-row mui-search">
					<input type="search" class="mui-input-clear" placeholder="">
				</div></h1>
		</header>
		
		<!--<header id="header">
			<!--<div class="nvbt iback" onclick="back();"></div>
			<div class="nvtt">酒店位置</div>
			<div class="nvbt ipos" onclick="userLocation();"></div>
		</header>-->
		<div id="map">地图加载中...</div>
		<div class="">
			<div class="nvbt ipos" onclick="userLocation();"></div>
		</div>
	
		
	</body>
	<script src="../mui/js/mui.min.js"></script>
	<script type="text/javascript" src="../js/immersed.js"></script>
	<script type="text/javascript">
			var ws = null,
				wo = null;
			var em = null,
				map = null,
				pcenter = null;
			// H5 plus事件处理
			function plusReady() {
				if(!em || ws) { return };
				// 获取窗口对象
				ws = plus.webview.currentWebview();
				wo = ws.opener();
				//高德地图坐标为(116.3974357341,39.9085574220), 百度地图坐标为(116.3975,39.9074)
				pcenter = new plus.maps.Point(114.078595, 22.542077);
				setTimeout(function() {
					map = new plus.maps.Map("map");
					map.centerAndZoom(pcenter, 12);
					createMarker();
					// 创建子窗口
					
					userLocation();
				}, 300);
				// 显示页面并关闭等待框
				ws.show("pop-in");
			}
			if(window.plus) {
				plusReady();
			} else {
				document.addEventListener("plusready", plusReady, false);
			}
			// DOMContentloaded事件处理
			document.addEventListener("DOMContentLoaded", function() {
				em = document.getElementById("map");
				window.plus && plusReady();
			}, false);

			function userLocation() {
				map.showUserLocation(true);
				map.getUserLocation(function(state, pos) {
					if(0 == state) {
						map.setCenter(pos);
					}
//					var searchObj = new plus.maps.Search(map);
//					searchObj.onRouteSearchComplete = function(state, result) {
//						console.log("onRouteSearchComplete: " + state + " , " + result.routeNumber);
//						if(state == 0) {
//							if(result.routeNumber <= 0) {
//								alert("没有检索到结果");
//							}
//							map.addOverlay(result.getRoute(0));
//							for(var i = 0; i < result.routeNumber; i++) {
//								
//							}
//							
//						} else {
//							alert("检索失败");
//						}
//					}
//					searchObj.drivingSearch(pos, "深圳", pcenter,  "深圳");
				});
			}
			
			function createMarker() {
				//高德地图坐标为(116.3406445236,39.9630878208), 百度地图坐标为(116.347292,39.968716
				var marker = new plus.maps.Marker(new plus.maps.Point(114.078595, 22.542077));
				marker.setIcon("../styles/images/lock/icon_lock.png@3x.png");
//				marker.setLabel("宝贝打赏16元可以见哦");

				marker.onclick = function ( point ) {
					// JS code.
					console.log(point)
					createSubview();
					
				}
				var bubble = new plus.maps.Bubble("宝贝打赏16元可以见哦");
				marker.setBubble(bubble);
				map.addOverlay(marker);
				
			}

			function createSubview() {
				// 创建加载内容窗口
//				var topoffset = '44px';
//				if(plus.navigator.isImmersedStatusbar()) { // 兼容immersed状态栏模式
//					topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 44) + 'px';
//				}
				var wsub = plus.webview.create('carsex_map_sub.html', 'sub', {  height: '200px', position: 'fixed',bottom:'0px',left:'0px', scrollIndicator: 'none', background: 'transparent' });
				ws.append(wsub);
				
			}

			function resetMap() {
				//map.centerAndZoom(pcenter,12);
				map.reset();
			}
		</script>
</html>
